<template>
  <div class="main-content">
      <div class="content-count">
          <ul>
              <li class="count-list"
                v-for="(item,index) in list" :key="index">
                <i :class="['list-icon','iconfont',item.icon]"></i>
                <span>{{item.title}}</span>
                <p>{{item.detail}}</p>
                <router-link :to="item.path">【更多】</router-link>
            </li>
          </ul>
          <button v-if="hasPerm('sys:role:add')">增</button>
          <button v-if="hasPerm('sys:role:delete')">删</button>
          <button v-if="hasPerm('sys:role:update')">改</button>
          <button v-if="hasPerm('sys:role:select')">查</button>
      </div>
  </div>
</template>

<script>
export default {
  name: 'Home',
  data(){
    return {
      list:[
        {title:'企业管理',detail:'企业管理说明',path:'/testA',icon:'iconqiye'},
        {title:'财务管理',detail:'财务管理说明',path:'/testB',icon:'iconcaiwu'},
        {title:'产品管理',detail:'产品管理说明',path:'/testC',icon:'iconchanpin'},
        {title:'订单管理',detail:'订单管理说明',path:'/testD',icon:'iconorder-copy'}
      ]
    }
  },
  components: {
  }
}
</script>
<style scoped>
button{
  background-color: seagreen;
  border: none;
    color: white;
    font-family:Arial;
    padding: 10px 24px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 18px;
    margin: 4px 2px;
    cursor: pointer;
}
</style>